<template>
	<div class="app-container">
    <el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input placeholder="请验编号" v-model="dataForm.queryCheckId" :clearable="true" type="number" size="mini">
          <template slot="prepend">请验编号</template>
        </el-input>
      </el-form-item>
      <br />
      <el-form-item>
        <el-input placeholder="品名" v-model="dataForm.productName" :clearable="true" size="mini">
          <template slot="prepend">品名</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="GMP编码" v-model="dataForm.productGmp" :clearable="true" size="mini">
          <template slot="prepend">GMP编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="物料编码" v-model="dataForm.batchNum" :clearable="true" size="mini">
          <template slot="prepend">物料编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.groupStatus" clearable placeholder="全部状态" size="mini">
          <el-option label="待领取" value="1" />
          <el-option label="待填写" value="2" />
          <el-option label="已完成" value="3" />
      	</el-select>
      </el-form-item>

      <el-form-item v-if="userInfo.types.length != 0">
        <el-select v-model="dataForm.checkTypeId" clearable placeholder="全部分类" size="mini">
          <el-option
            v-for="t in userInfo.types"
            :key="t.checkTypeId"
            :label="t.checkTypeName"
            :value="t.checkTypeId">
          </el-option>
      	</el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="pan-btn primary-btn" @click="searchData()" icon="el-icon-search" size="mini">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="pan-btn danger-btn" v-if="userInfo.username == 'admin' || (userInfo.inspectionGroupIds != null && isAuth('check:groupget'))" @click="get()" icon="el-icon-shopping-bag-2" :disabled="selectionList.length == 0" size="mini">领取</el-button>
      </el-form-item>
    </el-form>

    <el-table
    	:data="dataList"
    	v-loading="dataListLoading"
      ref="dataTable"
    	border
      fit
      highlight-current-row
    	@selection-change="selectionChange"
      style="width: 100%">
      <el-table-column
        v-if="userInfo.username == 'admin' ? true : userInfo.inspectionGroupIds != null"
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="checkId"
        header-align="center"
        align="center"
        label="编号"
        width="100">
      </el-table-column>
      <el-table-column
      	prop="groupStatus"
      	header-align="center"
      	align="center"
      	label="各组状态"
        width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.groupStatus == 1 ? 'danger' : row.groupStatus == 2 ? 'warning' : 'success'" size="small">
            {{ row.groupStatus | groupStatusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="checkTypeName"
        header-align="center"
        align="center"
        label="分类">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="品名">
      </el-table-column>
      <el-table-column
        prop="batchNum"
        header-align="center"
        align="center"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="productSpec"
        header-align="center"
        align="center"
        label="货品规格">
        <template slot-scope="{row}">
          <span v-html="row.productSpec"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productPackSpec"
        header-align="center"
        align="center"
        label="包装规格">
      </el-table-column>
      <el-table-column
        prop="procedureName"
        header-align="center"
        align="center"
        label="工序">
        <template slot-scope="{row}">
          {{ row.procedureName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="dispenseUserName"
        header-align="center"
        align="center"
        label="分发人">
      </el-table-column>
      <el-table-column
        prop="dispenseDate"
        header-align="center"
        align="center"
        label="分发时间">
        <template slot-scope="{row}">{{row.dispenseDate | changeTime}}</template>
      </el-table-column>
      <el-table-column
        prop="groupGetQuantity"
        header-align="center"
        align="center"
        label="分发量">
        <template slot-scope="{row}">{{row.groupGetQuantity + row.groupGetUnitName}}</template>
      </el-table-column>
      <el-table-column
        prop="inspectionGroupName"
        header-align="center"
        align="center"
        label="检验组">
      </el-table-column>
      <el-table-column
        v-if="dataForm.checkTypeId == 6"
        prop="stabilityModeName"
        header-align="center"
        align="center"
        label="考察方式">
        <template slot-scope="{row}">
          {{ row.stabilityModeName + ' ' + row.timeValue + row.timeName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <template v-if="userInfo.username == 'admin' ? true : userInfo.inspectionGroupIds == null ? false : userInfo.inspectionGroupIds.indexOf(scope.row.inspectionGroupId) > -1">
            <el-button type="danger" class="pan-btn danger-btn" size="mini" @click="get(scope.row)" v-if="scope.row.groupStatus == 1 && isAuth('check:groupget')">领取</el-button>
            <el-button type="warning" class="pan-btn warning-btn" size="mini" @click="write(scope.row)" v-if="scope.row.groupStatus == 2 && isAuth('check:groupwrite')">填写</el-button>
            <el-button type="success" class="pan-btn success-btn" size="mini" @click="write(scope.row)" v-if="scope.row.groupStatus == 3 && isAuth('check:groupwrite') && scope.row.status < 7">修改</el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="详情"
        width="100">
        <template slot-scope="scope">
          <el-button type="info" class="pan-btn info-btn" size="mini" @click="info(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <check-info
      v-if="infoVisible"
      @close="close('infoVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

    <group-get
      v-if="getVisible"
      @close="close('getVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

    <group-write
      v-if="writeVisible"
      @close="close('writeVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

	</div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import CommonMethod from '@/views/mixin/common'
  import { CODE_OK } from '@/common/js/config'
  import { checkList } from '@/api/check'
  import CheckInfo from '@/views/modules/process/common/check-info'
  import GroupGet from '@/views/modules/process/groupgetandwrite/get'
  import GroupWrite from '@/views/modules/process/groupgetandwrite/write'
	export default {
    name: 'lingquyutianxie',
    filters: {
      groupStatusFilter(status) {
        const statusMap = {
          1: '待领取',
          2: '待填写',
          3: '已完成'
        }
        return statusMap[status]
      }
    },
    mixins: [CommonMethod],
    components: {
    	CheckInfo,GroupGet,GroupWrite
    },
		data(){
      return{
        currentStatus: 4,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataForm: {},
        childDataForm: '',
        selectionList: [],
        infoVisible: false,
        getVisible: false,
        writeVisible: false
      }
		},
    mounted() {
      this.getInfo()
    },
    computed: {
      ...mapGetters([
         'userInfo'
      ])
    },
		methods:{
      searchData() {
      	this.pageIndex=1
      	this.getDataList()
      },
      getInfo() {
        this.getDataList()
      },
      getDataList() {
      	this.dataListLoading = true
        const params = {
          page: this.pageIndex,
          limit: this.pageSize,
          status: '4,5,6,10,7,8,11',
          isGroupView: 0,
          groupStatus: this.dataForm.groupStatus || '1,2,3',
          inspectionGroupIds: this.userInfo.inspectionGroupIds,
          checkTypeId: this.dataForm.checkTypeId || this.userInfo.types.map(t => {return t.checkTypeId}).join(','),
          productName: this.dataForm.productName || null,
          productGmp: this.dataForm.productGmp || null,
          batchNum: this.dataForm.batchNum || null,
          checkId: this.dataForm.queryCheckId || null
        }
        checkList(params).then(res => {
        	if (res.code === CODE_OK) {
        		this.dataList = res.page.list
        		this.totalPage = res.page.totalCount
        	}else{
        		this.$message.error(res.msg)
        	}
        	this.dataListLoading = false
        }).catch()
      },
      get(row) {
        this.childDataForm = row ? [row] : this.selectionList
        this.getVisible = !this.getVisible
      },
      write(row) {
        this.childDataForm = JSON.parse(JSON.stringify(row))
        this.writeVisible = !this.writeVisible
      },
      info(row) {
        this.childDataForm = {
          currentStatus: this.currentStatus,
          info: row
        }
        this.infoVisible = !this.infoVisible
      },
      close(val) {
        this.childDataForm = ''
        this[val] = !this[val]
      },
      selectionChange(items) {
      	this.selectionList = items.filter(item => {
          return item.groupStatus == 1
        })
      }
		}
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
</style>
